<script setup lang="ts" name="ImgEditTool">
import { sendTabMessage } from '@/utils/windowTool'
import MenuBar from '@/views/components/menuBar/index.vue'
const domMenuBar = ref()
const toolName = ref<string>('')
const domBtn = ref()

//工具
const tools = ref<Array<any>>([
    {
        name: '旋转90°',
        icon: 'rotates',
        mark: 'rotate'
    },
    {
        name: '镜像',
        icon: 'mirrors',
        mark: 'image'
    },
    {
        name: '裁剪',
        icon: 'crop',
        mark: 'crop'
    },
    {
        name: '证件照排版',
        icon: 'passport',
        mark: 'passport'
    },
    {
        name: '像素调节',
        icon: 'pixel',
        mark: 'pixel'
    },
    {
        name: '打印图像',
        icon: 'print',
        mark: 'print'
    }
])

const initToolHover = () => {
    const doms = Array.isArray(domBtn.value) ? domBtn.value : [domBtn.value]
    doms.forEach((d: any) => {
        d.addEventListener('mouseenter', (e: any) => {
            setTimeout(() => {
                toolName.value = e.srcElement.dataset.name
            }, 300)

        })
        d.addEventListener('mouseleave', (e: any) => {
            setTimeout(() => {
                toolName.value = ''
            }, 300)
        })
    })
}

//监听按钮点击
const handleBtnClick = (mark: string) => {
    sendTabMessage('ImgEditToolClick', mark)
}

onMounted(() => {
    initToolHover()
})
</script>
<template>
	<MenuBar ref="domMenuBar" title="工具" barColor="#222" hideMaximize hideMinimize hideLogo closeIcon="hide" />
	<div class="main-content img-edit-tool">
		<div ref="domBtn" class="btn" v-for="item, index in tools" :key="index" :data-name="item.name" @click="handleBtnClick(item.mark)">
			<svg-icon :icon-class="item.icon" width="28" height="28" />
		</div>
		<div class="note">
			{{ toolName }}
		</div>
	</div>
</template>
<style lang="scss">
.main-content.img-edit-tool {
    width: 100vw;
    height: calc(100vh - 40px);
    background-color: #222;

    .btn {
        width: 50vw;
        height: 50vw;
        color: #e1e1e1;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        cursor: pointer;

        &:hover {
            background-color: #333;
            color: #9999FF;
            border-radius: 25vw;
        }
    }

    .note {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        color: #666;
        font-size: 14px;
    }


}
</style>
<style lang="scss" scoped></style>
